<template>
  <div id="app">
    <!-- 无间隔等分 -->
    <!-- 
      el-row: 行
      el-col: 列 根据 :span=num num为所占据多少等份
     -->
    <!-- <el-row class="box">
       <el-col :span="8">
         <div class="orange"></div>
       </el-col>
       <el-col :span="8">
         <div class="orangered"></div>
       </el-col>
       <el-col :span="8">
         <div class="orange"></div>
       </el-col>
     </el-row> -->
    <!-- 无间隔不等分(总共24份 24份即可占满整个可视窗) -->
    <!-- <el-row class="box">
      <el-col :span="12">
        <div class="orange"></div>
      </el-col>
      <el-col :span="8">
        <div class="orangered"></div>
      </el-col>
      <el-col :span="4">
        <div class="orange"></div>
      </el-col>
    </el-row> -->
    <!-- 间隔 -->
    <!-- :gutter="num" num即为间隔像素纯数字即可 -->
    <el-row class="box" :gutter="46">
      <el-col :span="8">
        <div class="orange"></div>
      </el-col>
      <el-col :span="8">
        <div class="orangered"></div>
      </el-col>
      <el-col :span="8">
        <div class="orange"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {},
};
</script>
<style >
* {
  padding: 0;
  margin: 0;
}
</style>
<style lang="less" scoped>
// scoped局部样式
#app {
  .box {
    width: 100%;
    height: 100vh;
    .orange {
      background-color: orange;
      height: 20px;
    }
    .orangered {
      background-color: orangered;
      height: 20px;
    }
  }
}
</style>
